<template>
    <div>
        vac-app-{{ state.myname }}---{{ computedName }}
        <div>{{ myage }}</div>
        <div ref="mydiv">哈哈哈</div>
        <Child title="首页" :obj="{ name: 'kerwin', age: 100 }" @event="handleEvent"></Child>
    </div>
</template>

<script lang='ts' setup>
import Child from './Child.vue'
import { reactive, ref, onMounted, computed } from 'vue'
import type { Ref } from 'vue'

interface IState {
    myname: string
}
const state: IState = reactive({
    myname: 'kerwin'
})

// const myage = ref(100) //隐式推导
// const myage: Ref<number> = ref(100)
const myage = ref<number>(90)

//节点引用
const mydiv = ref<HTMLDivElement>()

onMounted(() => {
    console.log(mydiv.value?.innerHTML);
})

//计算属性
const computedName = computed<string>(() => {
    return state.myname.substring(0, 1).toUpperCase() + state.myname.substring(1)
})

//子传父
const handleEvent = (data: string) => {
    console.log(data);
}

</script>
